<template>
  <section class="page-container">
    <section class="search-form">
      <el-inline-form
        ref="basicFormRef"
        class="form-bottom-border"
        label-size="default"
        :model="searchParams"
        @do-search="doSearchHandle"
      >
        <el-inline-form-item
          label="规则名称:"
          prop="ruleName"
        >
          <el-input
            v-model="searchParams.ruleName"
            placeholder="请输入规则名称"
            clearable
          />
        </el-inline-form-item>
        <el-inline-form-item
          label="描述:"
          prop="describe"
        >
          <el-input
            v-model="searchParams.describe"
            placeholder="请输入描述"
            clearable
          />
        </el-inline-form-item>
      </el-inline-form>
    </section>

    <section class="options-wrap">
      <el-button
        v-blur
        type="primary"
        @click="doEditHandle"
      >
        添加
      </el-button>
    </section>

    <base-table
      v-loading="loading"
      :data="tableData"
      :columns="columns"
      border
    />

    <base-pagination
      :total="total"
      @do-change="pageChangeHandle"
    />

    <edit-rules
      v-model:visible="showEditDialog"
      :is-edit="isEdit"
      :params="editParams"
    />
  </section>
</template>

<script lang="tsx">
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
} from 'vue';

import EditRules from '../components/edit-rules.vue';
import { getTableData } from '../tools';

import type { DataItem, SearchParamsType } from '@/types/table.d';

import { formatDate } from '@/utils/index';

  interface StateInterface {
    loading: boolean,
    tableData: DataItem[],
    total: number,
    searchParams: SearchParamsType,
    showEditDialog: boolean,
    isEdit: boolean,
    editParams: any,
    columns: TypeObject[]
  }

export default defineComponent({
  name: 'TableList',
  components: {
    EditRules,
  },
  setup() {
    const state: StateInterface = reactive({
      loading: false,
      searchParams: {
        pageNum: 1,
        pageSize: 10,
        ruleName: '',
        describe: '',
      },

      tableData: [],
      total: 0,
      columns: [
        {
          prop: 'ruleName',
          label: '规则名称',
        },
        {
          prop: 'describe',
          label: '描述',
        },
        {
          prop: 'frequency',
          label: '服务调用次数',
        },
        {
          prop: 'status',
          label: '状态',
          formatter: (row?: { status: number }) => (row?.status === 1 ? '开启' : '关闭'),
        },
        {
          prop: 'useTime',
          label: '上次调用时间',
          formatter: (row?: { useTime: string }) => formatDate(row?.useTime || '', 'YYYY-MM-DD'),
        },
        {
          prop: 'options',
          label: '操作',
          width: 140,
          render: (params: { [key: string]: any }) => (
            <>
              <el-button
                link
                v-blur
                type="primary"
                onClick={
                  () => {
                    // eslint-disable-next-line no-use-before-define
                    doEditHandle(params.row);
                  }
                }>
                    配置
              </el-button>

              <el-button
                v-blur
                link
                type="primary">
                    订阅报警
              </el-button>
            </>
          ),
        }
      ],

      showEditDialog: false,
      isEdit: false,
      editParams: {},
    });

    const doSearchHandle = (firstPage = false) => {
      if (firstPage) {
        state.searchParams.pageNum = 1;
      }
      state.loading = true;
      setTimeout(() => {
        state.loading = false;
        const searchResult = getTableData(state.searchParams);
        state.tableData = searchResult.result;
        state.total = searchResult.total;
      }, 500);
    };

    const pageChangeHandle = (params: {currentPage: number, pageSize: number}) => {
      state.searchParams.pageNum = params.currentPage;
      state.searchParams.pageSize = params.pageSize;

      doSearchHandle();
    };

    const doEditHandle:Func = (params?: DataItem) => {
      state.showEditDialog = true;
      state.isEdit = !!(params && Object.keys(params).length);
      state.editParams = params || {};
    };

    onMounted(() => {
      doSearchHandle(true);
    });

    return {
      ...toRefs(state),
      pageChangeHandle,
      doEditHandle,
      doSearchHandle,
    };
  },
});
</script>
<style lang="scss" scoped>
  .options-wrap {
    padding: 10px 0;
    text-align: right;
  }
</style>
